<template>
  <div class="search">
    <div>
      <van-search
        v-model="value"
        @search="search"
        placeholder="请输门店名称或手机号"
        background="rgb(245 ,245 ,245)"
      />
    </div>
    <div class="history">
      <span>搜索历史</span>
      <van-icon name="delete-o" style="font-size: 16px" @click="remove" />
    </div>
    <div class="his_list">
      <ul>
        <template v-for="(g, i) in his">
          <li @click="getSearch(g)" :key="i" v-if="g">{{ g }}</li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: '',

      his: null

    }
  },
  methods: {
    remove () {
      sessionStorage.clear()
      this.csh()
    },
    search () {
      this.$store.commit('teacher/getword', this.value)
      this.$router.back()
      this.his.unshift(this.value)
      sessionStorage.setItem('history', JSON.stringify(this.his.slice(0, 5)))
    },
    csh () {
      if (sessionStorage.getItem('history')) {
        this.his = JSON.parse(sessionStorage.getItem('history'))
      } else {
        this.his = []
      }
    },
    getSearch (val) {
      this.value = val
    }
  },

  name: 'storeSearch',
  created () {
    this.value = this.$store.state.teacher.keyword
    this.csh()
  }
}
</script>

<style lang="less" scoped>
.search {
  font-family: PingFangSC-Regular, PingFang SC;
  .history {
    margin-top: 15px;
    display: flex;
    padding: 0 16px 0 20px;
    justify-content: space-between;
    span {
      font-size: 13px;
      color: #666666;
    }
  }
  .his_list {
    ul {
      display: flex;
      flex-wrap: wrap;
      margin-top: 15px;
      padding: 0 20px;
      li {
        margin-right: 15px;
        margin-bottom: 15px;
        background: #f2f3f5;
        border-radius: 14px;
        color: #666666;
        font-size: 13px;
        padding: 5px 12px;
      }
    }
  }
}
/deep/ .van-search__content {
  background-color: #ffffff;
}
</style>
